<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=no;">
		<title>{$work.wname}</title>
		<link rel="stylesheet" href="/Public/Wap/hpf/css/Hpfstyle.css" />
        <script src="/Public/static/jquery-1.10.2.min.js"></script>
        <link rel="stylesheet" href="/Public/Wap/hpf/css/banner.css" />
		<script type="text/javascript" src="/Public/Wap/hpf/css/iscroll.js"></script>
		<script type="text/javascript" src="/Public/Wap/hpf/css/jQuery.js"></script>
        <script>
            $(function () {
                // 收藏
                $('#do_collect').click(function () {
                    var _this = $('#do_collect');
                    var wid = "{$work.id}";
                    $.get("{:U('Works/collect')}", {wid: wid}, function (r) {
                        if (r.status) {
                            if (r.action == 'add') {
                                // 收藏
                                _this.addClass('xqT3bg');
                            }
                            else if (r.action == 'remove') {
                                // 取消收藏
                                _this.removeClass('xqT3bg');
                            }
                        }
                        else {
                            alert(r.info);
                        }
                    }, 'json')
                });
            });
        </script>
        <style>
		  	.sjsxq .scroll_pic_nav{background-color:transparent;}
		  	.xqT3 li:nth-child(2){border: 0;}
		  	.xqT3 ul li:last-child{border-right: 1px solid #222426;}
		  	.xqT3 ul li:first-child{width: 47%;}
		  	.xqBot ul li>div>label{width: 92%;}
		  	
		</style>
	</head>
	<body style="background-color: #ededed;">
		<div class="sjsxq zpxq">
			<div class="xqTop">
				<div class="xqTop1">
					<!--<img class="zpxqImg" src="{$work.pic_path}"/>-->
                    <!-- 幻灯 -->
                    <div style="display: block">
                        <div class="wraper">
						<header id="scroll_pic_view" class="scroll_pic_view" style="overflow: hidden;">
							<div id="scroll_pic_view_div" style="width: 3840px; -webkit-transition: transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); transition: transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); -webkit-transform-origin: 0px 0px 0px; -webkit-transform: translate(0px, 0px) translateZ(0px); transform-origin: 0px 0px 0px; transform: translate(-1920px, 0px) scale(1) translateZ(0px);">
								<ul id="scroll_pic_view_ul">
									<volist name="work.pic" id="pic_path">
										<li style="width: 100%;">
				                        	<img src="{$pic_path}"/>
				                        </li>
				                    </volist>
								</ul>
							</div>
							<div>
								<ol id="scroll_pic_nav" class="scroll_pic_nav">
									<script>
										(function(d, $){
											var scrollPicView = d.getElementById("scroll_pic_view"),
											scrollPicViewDiv = d.getElementById("scroll_pic_view_div"),
											lis = scrollPicViewDiv.querySelectorAll("li"),
											w = scrollPicView.offsetWidth,
											len = lis.length;
											for(var i=0; i<len; i++){
												lis[i].style.width = w+"px";
												if(i == len-1){
													scrollPicViewDiv.style.width = w * len + "px";
												}
											}
						
											var scroll_pic_view = new iScroll('scroll_pic_view', { 
												snap: true,
												momentum: false,
												hScrollbar: false,
												useTransition: true,
												onScrollEnd: function() {
													$("#scroll_pic_nav li").removeClass("on").eq(this.currPageX).addClass("on");
													//$("#scroll_pic_nav li.on").prev().addClass("left");
													//$("#scroll_pic_nav li.on").next().removeClass("left");	
													
													var  list=$("#scroll_pic_nav li");
													for(var k=0;k<list.length;k++){
														if(k<this.currPageX)
															$(list[k]).addClass("left");
														else
															$(list[k]).removeClass("left");
													}												
												}
											});
											//
											var nav_lis = new Array(lis.length);
											d.write('<li class="on"><span></span></li>');
											for(var i=1; i<nav_lis.length; i++){										
												d.write("<li><span></span></li>");				
											}
										})(document, $);
									</script>
								</ol>
							</div>
						</header>
					</div>
                        
                    </div>
                   
					<div class="xqT1">
						<label>{$work.wname}</label>
						<span>{$work.explain}</span>
					</div>
					<div class="xqT2">
					</div>
				</div>
                <!-- 设计师信息 -->
                <div class="xqTsjs" style="display: block">
                    <img src="{$work.designer.cover|get_cover='path'}"/>
                    <div class="xqTsjs1">
                    	<label>{$work.designer.dname}</label>
                    	<span>{$work.designer.job}</span>
                    </div>
                    <div class="xqTsjs2">
                   	<label>{$work.designer.collect_num|default=0}收藏</label>
                   	<img src="/Public/Wap/hpf/images/sc.png"/>
					</div>
                </div>
				<div class="xqT3">
					<ul>
						<li class="xqT30" style="width: 47%;color:#ff8800;">{$work.collect_total}热度</li> <!-- 收藏数 -->
						<li style="float: right;"{$work['is_collect']?' class="xqT3bg"':''} id="do_collect"><label class="xqT34"></label><span>{$work['is_collect']?'已收藏':'收藏'}</span></li><!-- 是否收藏 -->
						<li style="float: right;"><label class="xqT33"></label><span>分享</span></li><!-- 分享 -->
						<li style="float: right;"><a href="{:U('Designer/detail',array('id'=>$work['did']))}"><label class="xqT32"></label><span>设计师</span></a></li><!-- 设计师连接 -->
					</ul>
				</div>
			</div>
            <!-- 最新作品 -->
            <div class="xqBot">
                <p><label></label><span>其他作品</span><label></label></p>
                <ul>
                    <volist name="new_works" id="work">
                        <li>
                            <div>
								<!-- 收藏量 -->
								<a href="{:U('Works/detail',array('id'=>$work['id']))}"><img src="{$work.pic_path}"/><span>
	                            <img src="/Public/Wap/hpf/images/xingx.png"/><label>{$work.collect_nums|default=0}</label></span></a>
								<label>{$work.wname}</label>
							</div>
                        </li>
                    </volist>
                </ul>
            </div>
		</div>



	
<div class="fenxiangjt" style="display: none; width:100%; position: fixed;top:0;left:0;">
	<div style="width:100%; background: url(/Public/Wap/hpf/images/75.png) repeat;position: relative;">
	 <img src="/Public/Wap/hpf/images/fenxiang.png" alt="">
	</div>
</div>


<script>
	$(function(){
		$(document).on("click",".xqT33",function(){
			var w = $(window).width();
			var h = $(window).height();
			$(".fenxiangjt").css("height",h);
			$(".fenxiangjt div").css("height",h);

			$(".fenxiangjt img").css("width","60%").css("position","absolute").css("top",0).css("right","8%");
			
			$(".fenxiangjt").show();
		});

		$(document).on("click",".fenxiangjt",function(){
			$(this).hide();
		});


	});
</script>



		
	</body>
</html>
